<template>
  <view class="main_div">
    <view class="main_div_img">
      <image src="../../static/images/icon/dingwei.png" class="main_div_img_img"></image>
      <text class="main_div_img_text">保定理工学院</text>
      <image src="../../static/images/icon/xiajiantou.png" class="main_div_img_img2"></image>
    </view>
    
    <!-- 悬浮球组件 -->
    <view class="floating-ball-simple" @click="showFloatingMenu">
      <text class="floating-icon">📋</text>
    </view>
    
    <!-- 原生轮播图 -->
    <view class="main_div_swiper">
      <swiper 
        class="swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :duration="500"
        indicator-color="rgba(255, 255, 255, 0.6)"
        indicator-active-color="#FF6E26"
      >
        <swiper-item v-for="(item, index) in list1" :key="index">
          <image :src="item" class="swiper-image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    
   
    
    
    <!-- 抢单按钮 -->
    <view class="grab-order-section">
      <button class="grab-order-btn" @click="goToGrabOrder">
        <text class="btn-icon">⚡</text>
        <text class="btn-text">进入抢单大厅</text>
        <text class="btn-subtitle">快速接单赚钱</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ]
    }
  },
  methods: {
    goToGrabOrder() {
      uni.navigateTo({
        url: '/pages/JJK/qiang'
      })
    },
    showFloatingMenu() {
      this.showMenu = true
    },
    hideFloatingMenu() {
      this.showMenu = false
    },
    goToHistory() {
      this.showMenu = false
      uni.navigateTo({
        url: '/pages/JJK/history-orders'
      })
    },
    goToMyOrders() {
      this.showMenu = false
      uni.navigateTo({
        url: '/pages/JJK/my-orders'
      })
    },
    goToOrderHall() {
      this.showMenu = false
      uni.navigateTo({
        url: '/pages/JJK/qiang'
      })
    },
    
    // 新页面跳转方法
    goToExpressPickup() {
      uni.navigateTo({
        url: '/pages/express/express-pickup'
      })
    },
    
    goToTakeoutHelper() {
      uni.navigateTo({
        url: '/pages/takeout/takeout-helper'
      })
    },
    
    goToMyOrderList() {
      uni.navigateTo({
        url: '/pages/my-orders/my-orders'
      })
    },
    
    // 跳转到地址管理
    goToAddressList() {
      uni.navigateTo({
        url: '/pages/address/address-list'
      })
    }
  },
  mounted() {
    console.log('页面已加载，轮播图数据:', this.list1)
    // H5环境调试信息
    // #ifdef H5
    console.log('H5环境检测:', {
      userAgent: navigator.userAgent,
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      devicePixelRatio: window.devicePixelRatio
    })
    // #endif
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main_div {
  /* 移除margin-top，使用padding-top来避免被导航栏遮挡 */
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 100vh;
  background-color: #F6F7F8;
}

.main_div_img {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.main_div_img_img {
  width: 28px;
  height: 28px;
}

.main_div_img_img2 {
  margin-left: 4px;
  width: 20px;
  height: 28px;
}

.main_div_img_text {
  font-size: 16px;
  color: #333;
  margin-left: 4px;
  font-weight: 500;
}

.main_div_swiper {
  height: 200px;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.swiper {
  height: 100%;
  width: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.test-content {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.test-content text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 抢单按钮样式 */
.grab-order-section {
  margin-bottom: 20px;
}

.grab-order-btn {
  width: 100%;
  background: linear-gradient(135deg, #FF6E26 0%, #FF8F4A 100%);
  border: none;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(255, 110, 38, 0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.grab-order-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.grab-order-btn:active::after {
  left: 100%;
}

.btn-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: #fff;
}

.btn-text {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}

/* 悬浮球样式 */
.floating-ball-simple {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
}

.floating-ball-simple:active {
  transform: scale(0.95);
}

.floating-icon {
  font-size: 24px;
  color: #fff;
}

.floating-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.menu-content {
  position: absolute;
  right: 30px;
  bottom: 170px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  padding: 12px 20px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  min-width: 130px;
  transition: all 0.2s ease;
}

.menu-item:active {
  transform: scale(0.95);
  background-color: rgba(255, 255, 255, 0.8);
}

.menu-emoji {
  font-size: 18px;
  margin-right: 10px;
}

.menu-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.btn-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

/* 服务选择卡片样式 */
.service-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.service-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.service-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.service-card:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.service-card:nth-child(1) {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.service-card:nth-child(2) {
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.service-card:nth-child(3) {
  background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%);
  box-shadow: 0 4px 15px rgba(69, 183, 209, 0.3);
}

.service-card:nth-child(4) {
  background: linear-gradient(135deg, #96CEB4 0%, #FFECD2 100%);
  box-shadow: 0 4px 15px rgba(150, 206, 180, 0.3);
}

.service-icon {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

.service-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.service-desc {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.4;
}

/* 快捷导航样式 */
.quick-nav-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.quick-nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.quick-nav-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-width: 60px;
}

.nav-item:active {
  transform: scale(0.9);
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.nav-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.nav-text {
  font-size: 12px;
  color: #666;
  text-align: center;
  font-weight: 500;
}

/* H5环境特殊处理 */
/* #ifdef H5 */
.main_div {
  padding-top: 60px; /* 为自定义导航栏留出空间 */
}

/* 确保内容在视口内可见 */
.main_div_img,
.main_div_swiper,
.service-section,
.quick-nav-section,
.grab-order-section {
  max-width: 100%;
  overflow: hidden;
}

/* H5环境下服务卡片响应式 */
.service-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* #endif */
</style>